<template>
  <el-container>
    <el-header style="padding: 0;">
      <el-menu class="el-menu" mode="horizontal">
          <el-menu-item index="1" style="width: 200px;">
              <router-link
                    style="display: inline-block; font-size: 20px; line-height: 48px; width: 100%; text-decoration-line: none"
                    title="回到主页"
                    :to="{ path:'/hourseList'}"
                  >
                    <img
                      src="../images/icon.png"
                      style="margin-bottom: 2px; line-height: 48px; display: inline-block"
                    />
                    管理平台
              </router-link>
          </el-menu-item>
          <el-menu-item
            index="4"
            style="float: right;"
            title="退出系统"
            @click="logout"
          >
            <span style="cursor: pointer"> 退出 </span>
          </el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <HomeSide/><!--目录菜单-->
      <el-container class="main-body">
        <router-view class="main-content" :key="Math.random()"></router-view><!--:key="Math.random()" 解决相同组件跳转页面不刷新的问题-->
        <!-- <el-footer class="footer">&copy; 2019</el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions } from "vuex";
import { USER_SIGNOUT } from "../store/user";
import HomeSide from "./HomeSide.vue";
export default {
  name: "Home",
  data() {
    return {
    };
  },
  components: { HomeSide },
  methods: {
      ...mapActions([USER_SIGNOUT]),
      logout(){
        this.USER_SIGNOUT();
        this.$router.replace({
          path: "/login"
        });
      }
  }
};
</script>

<style scoped>
.el-menu,
.el-footer {
  background-color: #3c8dbd;
  color: #ffffff;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  color: #878e93;
  background-color: #ecf0f5;
  line-height: 40px;
  height: 40px !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-menu >>> .el-menu-item {
  color: white !important;
}

.el-menu >>> .el-menu-item:hover,
.el-menu >>> .el-menu-item:focus {
  color: white !important;
  background-color: rgba(40, 121, 169) !important;
}

.el-menu >>> .is-active.el-menu-item:focus {
  color: white !important;
}

.el-menu >>> .navbar-group-item.is-active.el-menu-item:focus {
  color: none !important;
}

.el-menu >>> .navbar-group-item.el-menu-item:hover,
.el-menu >>> .navbar-group-item.el-menu-item:focus {
  color: white !important;
  background-color: transparent !important;
  cursor: unset;
  border-bottom: none;
}

body > .el-container {
  margin-bottom: 40px;
}

.main-body {
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* margin-top: 20px;
  margin-left: 20px; */
}

.main-content {
  min-height: calc(100vh - 60px - 60px - 40px);
  margin-top: 20px;
  margin-right: 20px;
}

.footer {
  justify-self: flex-end;
}
</style>
